<template>
	<view class="uni-login">
		<!-- 顶部 -->
		<view class="topTabBtn">
			<!-- <image v-if="ifMessage" src="../static/city-manage/message.png" @click="showMessageList"></image>
			<image v-if="!ifMessage" src="../static/city-manage/no-message.png"></image>
			<image src="../static/city-manage/out.png" @click="outLogin"></image> -->
			<image src="../static/city-manage/moreThree.png" @click="clickShowMsgBox"></image>

			<view class="container" :class="[showFlag ? 'show' : 'unShow']">
				<label class="label_msg" @click="scanCodeCs">
					<image src="../static/city-manage/saoyisao.png"></image>
					<text class="text">扫一扫</text>
				</label>
				<label v-if="ifMessage" class="label_msg" @click="showMessageList">
					<image src="../static/city-manage/message.png"></image>
					<text class="text">消息</text>
				</label>
				<label v-if="!ifMessage" class="label_msg">
					<image src="../static/city-manage/no-message.png"></image>
					<text class="text">消息</text>
				</label>
				<label class="label_msg" @click="outLogin">
					<image src="../static/city-manage/out.png"></image>
					<text class="text">退出</text>
				</label>
			</view>
		</view>

		<view ref="homeContent" class="home_content" @click.stop="clickHomeContent($event)">
			<view class="personcss">
				<!-- 头像 -->
				<view v-if="userInfo.avatar == null" class="uni-Headshot">
					<image @click="uploadImage" src="../static/city-manage/uploadImage.png" mode="aspectFit"></image>
					<view>上传图片</view>
				</view>
				<view v-if="userInfo.avatar != null" class="uni-Headshot">
					<image class="txImg" @click="clickImage" :src="userInfo.avatar"></image>
				</view>
				<!-- 个人信息 -->
				<view class="uni-message">
					<view class="uni-message-name">
						<view class="uni-message-name-icon">
							<image src="../static/icon_b1ogyrvee2o/wode.png" mode=""></image>
						</view>
						<view class="uni-message-name-news">{{userInfo.nickName}}</view>
					</view>
					<view class="uni-message-name">
						<view class="uni-message-name-icon">
							<image src="../static/icon_b1ogyrvee2o/dianhua.png" mode=""></image>
						</view>
						<view class="uni-message-name-news">{{userInfo.phonenumber}}</view>
					</view>
					<hr class="uni-message-hr" />
					<view class="uni-message-name">
						<view class="uni-message-name-text">
							角&nbsp; &nbsp; &nbsp;&nbsp; 色：
						</view>
						<view class="uni-message-name-news">{{ userInfo.role.roleName}}</view>
					</view>
					<!-- 机构处置人员 -->
					<view class="uni-message-name" v-if="userInfo.role.roleKey === 'jgczry'">
						<view class="uni-message-name-text">
							所属机构：
						</view>
						<view class="uni-message-name-news">{{userInfo.organization.name}}</view>
					</view>
					<!-- 监理 -->
					<view v-if="userInfo.role.roleKey === 'ptjl'" class="uni-message-name">
						<view class="uni-message-name-text">
							所属公司：
						</view>
						<view class="uni-message-name-news">{{userInfo.supervision.name}}</view>
					</view>
					<view class="uni-message-name">
						<view class="uni-message-name-text">
							服务部门：
						</view>
						<view class="uni-message-name-news">{{userInfo.dept.deptName}}</view>
					</view>
				</view>
			</view>
			<view class="uni-form">
				<!-- 处置人员  机构处置人员 平台监理-->
				<view
					v-if="userInfo.role.roleKey == 'czry' ||userInfo.role.roleKey == 'jgczry' || userInfo.role.roleKey == 'ptjl'">
					<view class="uni-events" @click="gotoPendingCases">
						<view class="uni-events-icon">
							<image src="../static/city-manage/daiban.png" mode=""></image>
						</view>
						<view class="uni-events-iead">待办案件</view>
						<view class="uni-events-dire">
							<image src="../static/icon_b1ogyrvee2o/xiangyou.png" mode=""></image>
						</view>
					</view>
				</view>
				<!--处置人员 标段机构接线员 -->
				<view v-if="userInfo.role.roleKey != 'czry'">
					<view class="uni-events" @click="gotoCase">
						<view class="uni-events-icon">
							<image src="../static/city-manage/shangbao.png" mode=""></image>
						</view>
						<view class="uni-events-iead">案件上报</view>
						<view class="uni-events-dire">
							<image src="../static/icon_b1ogyrvee2o/xiangyou.png" mode=""></image>
						</view>
					</view>
				</view>
				<!-- 标段机构接线员 -->
				<view v-if="userInfo.role.roleKey != 'bdjgjxy' && userInfo.role.roleKey != 'admin'">
					<view class="uni-events" @click="gotoMyTask">
						<view class="uni-events-icon">
							<image src="../static/city-manage/anjian.png" mode=""></image>
						</view>
						<view class="uni-events-iead">我的案件</view>
						<view class="uni-events-dire">
							<image src="../static/icon_b1ogyrvee2o/xiangyou.png" mode=""></image>
						</view>
					</view>
				</view>
				<!-- 机构处置人员(路长) 处置人员-->
				<view v-if="userInfo.role.roleKey == 'jgczry' || userInfo.role.roleKey == 'czry'">
					<view class="uni-events" @click="gotoCaseConversation">
						<view class="uni-events-icon">
							<image src="../static/city-manage/huihua.png" mode=""></image>
						</view>
						<view class="uni-events-iead">案件会话</view>
						<view class="uni-events-dire">
							<image src="../static/icon_b1ogyrvee2o/xiangyou.png" mode=""></image>
						</view>
					</view>
				</view>
				<!-- 标段机构接线员 -->
				<view v-if="userInfo.role.roleKey == 'bdjgjxy'">
					<view class="uni-events" @click="gotoCasehandling">
						<view class="uni-events-icon">
							<image src="../static/city-manage/chuli.png" mode=""></image>
						</view>
						<view class="uni-events-iead">案件处理</view>
						<view class="uni-events-dire">
							<image src="../static/icon_b1ogyrvee2o/xiangyou.png" mode=""></image>
						</view>
					</view>
				</view>
				<!-- 标段机构接线员  超级管理员-->
				<view v-if="userInfo.role.roleKey == 'bdjgjxy' || userInfo.role.roleKey == 'admin'">
					<view class="uni-events" @click="gotoAllcases">
						<view class="uni-events-icon">
							<image src="../static/city-manage/quanbuanjian.png" mode=""></image>
						</view>
						<view class="uni-events-iead">全部案件</view>
						<view class="uni-events-dire">
							<image src="../static/icon_b1ogyrvee2o/xiangyou.png" mode=""></image>
						</view>
					</view>
				</view>

				<!-- 打卡 -->
				<view class="" v-if="userInfo.role.roleKey == 'xjy'">
					<view class="uni-events" @click="gotoPunchin">
						<view class="uni-events-icon">
							<image src="../static/city-manage/shezhi.png" mode=""></image>
						</view>
						<view class="uni-events-iead">打 卡</view>
						<view class="uni-events-dire">
							<image src="../static/icon_b1ogyrvee2o/xiangyou.png" mode=""></image>
						</view>
					</view>
				</view>

				<!-- 应急预警 -->
				<view v-if="userInfo.role.roleKey == 'jgczry' || userInfo.role.roleKey == 'czry' || userInfo.role.roleKey == 'xjy'">
					<view class="uni-events" @tap="openAlert">
						<view class="uni-events-icon">
							<image src="../static/city-manage/alert.png" mode=""></image>
						</view>
						<view class="uni-events-iead">应急预警</view>
						<view class="uni-events-dire">
							<image src="../static/icon_b1ogyrvee2o/xiangyou.png" mode=""></image>
						</view>
					</view>
				</view>

				<!-- 设置 -->
				<view class="uni-events" @click="gotoMySetting">
					<view class="uni-events-icon">
						<image src="../static/city-manage/shezhi.png" mode=""></image>
					</view>
					<view class="uni-events-iead">设 置</view>
					<view class="uni-events-dire">
						<image src="../static/icon_b1ogyrvee2o/xiangyou.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 上传头像提醒 -->
		<uni-popup ref="popup" type="bottom" background-color="#fff" class="imagePopup">
			<view class="clickimage">
				<button type="default" @click="uploadImage">重新上传</button>
				<button type="default" @click="viewImage">查看大图</button>
			</view>
			<button class="cancleImage" type="default" @click="cancleImage">取消</button>
		</uni-popup>

		<!-- 退出登录提醒 -->
		<uni-popup ref="popupOutLogin" type="dialog">
			<uni-popup-dialog mode="base" content="确定是否退出登录!" :duration="0" :before-close="true" @close="closeOutLogin"
				@confirm="confirmOutLogin">
			</uni-popup-dialog>
		</uni-popup>
	</view>


</template>

<script>
	import { uploadAppOfAvatar, appLogout, getCountUnRead} from '@/api/home.js'
	import { toLogin } from '@/util/util.js';
	import URL from '@/util/url.js'
	export default {
		data() {
			return {
				image_url: URL.CASEIMAGE_URL,
				// image_url: 'http://www.qjjxh.com:8081/file',
				//上传头像路径
				tempFilePaths: '',
				tempFilePathsArr: [],
				//用户登录的信息
				userInfo: {},
				ifMessage: false,
				message: '',
				showFlag: false,
			}
		},
		onLoad() {
			this.message = '';
			//用户登录信息
			this.userInfo = uni.getStorageSync('userInfo');

			if(!this.userInfo){
				toLogin();
				
				return 
			}

			const token = uni.getStorageSync('token');

			if (this.userInfo.avatar != null) {
				this.userInfo.avatar = this.userInfo.avatar.indexOf(this.image_url) > 0 ? this.userInfo.avatar : this.image_url + this.userInfo.avatar;
				this.avatar = [this.userInfo.avatar];
			}

			//统计未读消息数量
			this.getCountUnRead();
		},
		//页面生命周期---监听原生标题栏按钮点击事件
		onNavigationBarButtonTap(e) {
			//index :0-退出，1-消息
			if (e.index == 0) {
				this.$refs.popupOutLogin.open();
			} else if (e.index == 1) {}
		},
		//监听手机左滑或右滑返回事件
		onBackPress() {
			this.$refs.popupOutLogin.open();
			return true; //表示禁止默认返回
		},
		onShow() {
			setInterval(() => {
				if (this.message.length == 5) {
					return
				}
				this.message += '哈';
			}, 5000);
		},
		// watch:{
		// 	message(newValue, oldValue){
		// 		return plus.push.createMessage({case_id: 812});
		// 	}
		// },
		methods: {
			//点击其他地方，隐藏消息框
			clickHomeContent(e) {
				e.preventDefault();
				this.showFlag = false;
			},
			// 点击控制消息框的出现和隐藏
			clickShowMsgBox() {
				this.showFlag = !this.showFlag;
			},
			//调客户端扫码界面
			scanCodeCs: function(id) {
				this.showFlag = false;
				let _this = this;
				// 调起条码扫描
				// #ifdef APP-PLUS
				uni.scanCode({
					//onlyFromCamera: true,//只允许通过相机扫码
					scanType: ['qrCode', 'barCode'], //qrCode：二维码；barCode：一维码
					success: function(res) {
						_this.ewmMsg = res.scanType + res.result;
						uni.navigateTo({
							//url: res.result.split("#")[1]
							url:'/pages/qr-codeCiti/qr-codeCiti?token=' + uni.getStorageSync('token') + '&result=' + res.result
						});
					},

				});
				// #endif
			},
			//跳转到消息列表
			showMessageList() {
				this.showFlag = false;
				uni.navigateTo({
					url: '/pages/messageList/messageList'
				})
			},
			//统计未读消息数量
			getCountUnRead() {
				getCountUnRead({
					userId: this.userInfo.userId,
				}).then((res) => {
					if (res.code == 200) {
						if (res.data > 0) {
							this.ifMessage = true;
						}
					} else {
						this.$tip.toast(res.msg)
					}
				}).catch((error) => {
				})
			},
			//退出登录
			outLogin() {
				this.showFlag = false;
				this.$refs.popupOutLogin.open();
			},
			//上传头像
			uploadImage() {
				let _this = this;
				_this.tempFilePaths = '';
				_this.tempFilePathsArr = [];
				// 选择图片
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: function(res) {
						_this.tempFilePathsArr = res.tempFilePaths;
						_this.detailImage(res.tempFilePaths[0], (data) => {
							//base64 图片内容就是  data
							let index = data.indexOf(",")
							data = data.substring(index + 1);

							let options = {
								img: JSON.stringify([{
									"image": data
								}])
							}
							uni.showLoading({
								title: '正在上传'
							})
							uploadAppOfAvatar(options).then((response) => {
								if (response.code == 200) {
									_this.$tip.toast('上传成功');

									_this.userInfo.avatar = response.msg;
									_this.avatar = [_this.image_url + _this.userInfo.avatar];
									uni.setStorageSync('userInfo', _this.userInfo);
									_this.userInfo = uni.getStorageSync('userInfo');


									_this.userInfo.avatar = _this.userInfo.avatar.indexOf(_this
											.image_url) > 0 ? _this.userInfo.avatar : _this
										.image_url + _this.userInfo.avatar
									_this.avatar = [_this.userInfo.avatar];

									uni.hideLoading()
								} else {
									_this.$tip.toast(response.msg)
									uni.hideLoading()
								}
							}).catch((error) => {
							})
						})

						_this.$refs.popup.close();
					}
				});
			},
			// 图片转换为base64：H5和App
			detailImage(path, callback) {
				// #ifdef APP-PLUS
				plus.io.resolveLocalFileSystemURL(path, function(entry) {
					entry.file(function(file) {
						var fileReader = new plus.io.FileReader();
						//alert("getFile:" + JSON.stringify(file));
						fileReader.readAsDataURL(file);
						fileReader.onloadend = function(evt) {
							callback(evt.target.result);
						}
					})
				})
				// #endif

				// #ifdef H5
				var img = new Image();
				img.src = path;
				img.onload = function() {
					//默认按比例压缩
					var w = this.width,
						h = this.height;
					var quality = 0.95; // 默认图片质量为0.7

					//生成canvas
					var canvas = document.createElement('canvas');
					var ctx = canvas.getContext('2d');

					// 创建属性节点
					canvas.setAttribute("width", w);
					canvas.setAttribute("height", h);

					ctx.drawImage(this, 0, 0, w, h);
					// quality值越小，所绘制出的图像越模糊
					var base64 = canvas.toDataURL('image/jpeg', quality);
					// 回调函数返回base64的值
					callback(base64);
				};
				// #endif
			},
			//点击图片
			clickImage() {
				this.$refs.popup.open();
			},
			//点击图片--取消
			cancleImage() {
				this.$refs.popup.close();
			},
			//查看图片
			viewImage() {
				let _this = this;
				uni.previewImage({
					urls: _this.avatar,
					current: _this.avatar[0],
					longPressActions: {
						success: function(data) {
						}
					}
				});
			},
			//上报案件
			gotoCase() {
				uni.navigateTo({
					url: "/pages/case/case"
				})
			},
			//我的案件
			gotoMyTask() {
				uni.navigateTo({
					url: "/pages/my-task/taskList"
				})
			},
			//设置
			gotoMySetting() {
				uni.navigateTo({
					url: "/pages/my-setting/mySetting"
				})
			},
			//打卡
			gotoPunchin() {
				uni.navigateTo({
					url: "/pages/punchin/punchinline"
				})
			},
			//待办案件
			gotoPendingCases() {
				uni.navigateTo({
					url: "/pages/pending-cases/pendingCases?type=pending"
				})
			},
			// 案件会话
			gotoCaseConversation() {
				uni.navigateTo({
					url: "/pages/case-conversation/caseConversation"
				})
			},
			//案件处理
			gotoCasehandling() {
				uni.navigateTo({
					url: "/pages/casehandling/casehandling"
				})
			},
			//全部案件
			gotoAllcases() {
				uni.navigateTo({
					url: "/pages/allcases/allcases"
				})
			},
			openAlert() {
				uni.navigateTo({
					url: "/pages/alert/index"
				})
			},
			//关闭退出登录提醒
			closeOutLogin() {
				this.$refs.popupOutLogin.close();
			},
			//确定退出
			confirmOutLogin() {
				uni.showLoading({
					title: '正在退出...'
				});
				appLogout({
					userId: this.userInfo.userId
				}).then(res => {
					if (res.code == 200) {
						uni.removeStorageSync('userInfo');
						uni.navigateTo({
							url: '/pages/login'
						});
					} else {
						// this.$tip.toast(res.msg);
					}
					uni.hideLoading()
				}).catch((error) => {
				})
			}
		}
	}
</script>

<style lang="scss">
	.home_content {
		height: calc(100% - 88rpx);
	}

	.topTabBtn {
		height: 88rpx;
		background: linear-gradient(to right, #c4534c, #92231c);
		text-align: right;
		padding-top: 60rpx;
		padding-right: 30rpx;

		/* #ifdef APP-PLUS */
		//border-bottom:1px solid rgb(200, 199, 204);
		/* #endif */
		image {
			width: 44rpx;
			height: 44rpx;
			margin: 22rpx 20rpx;
		}

		.show {
			display: block;
		}

		.unShow {
			display: none;
		}

		.container {
			width: 190rpx;
			position: absolute;
			top: 120rpx;
			right: 40rpx;
			background: #412E2E;
			padding-left: 12rpx;
			border-radius: 10rpx;

			.label_msg {
				display: flex;
				align-items: center;
				height: 90rpx;

				image {
					width: 36rpx !important;
					height: 36rpx !important;
				}

				.text {
					font-size: 30rpx;
					color: #fff;
					height: 90rpx;
					line-height: 90rpx;
					border-bottom: 1px solid #524141;
					width: calc(100% - 78rpx);
					text-align: left;
				}

				&:last-child {
					.text {
						border: none;
					}
				}
			}
		}
	}

	uni-page-body {
		display: flex;
		flex-direction: column;
	}

	.uni-page-head-ft {
		line-height: 13px;
	}

	.imagePopup {
		.uni-mask--hook {
			background-color: rgba(0, 0, 0, 0.5) !important;
		}

		.clickimage {
			background: #fff;
			border-radius: 10rpx;
			margin-bottom: 20rpx;

			button {
				line-height: 90rpx;
				font-size: 32rpx;
			}
		}

		.cancleImage {
			margin-bottom: 20rpx;
			line-height: 90rpx;
			font-size: 32rpx;
			font-weight: bold;
		}
	}

	.uni-login {
		min-height: 100%;
		background: #fff;
		flex: 1;
		position: relative;

		.uni-form {
			width: 600rpx;
			background: white;
			border-radius: 20px;
			padding: 40rpx;
			box-shadow: #b5cede 0px 0px 10px;
			margin: -80rpx auto 0;

			.uni-events {
				width: 100%;
				height: 100rpx;
				border: 2rpx solid #DDDDDD;
				margin-top: 20rpx;
				border-radius: 10rpx;
				position: relative;
			}

			.uni-events-icon {
				width: 50rpx;
				height: 50rpx;
				position: absolute;
				top: 26rpx;
				left: 50rpx;

				image {
					width: 95%;
					height: 90%;
				}
			}

			.uni-events-iead {
				font-size: 28rpx;
				font-weight: bolder;
				position: absolute;
				top: 20rpx;
				left: 140rpx;
			}

			.uni-events-dire {
				position: absolute;
				top: 24rpx;
				right: 30rpx;
				width: 14rpx;
				height: 40rpx;

				image {
					width: 180%;
					height: 60%;
				}
			}
		}

		.personcss {
			background: linear-gradient(to right, #c4534c, #92231c);
			padding: 50rpx 70rpx 140rpx;
			color: #FFFFFF;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.uni-Headshot {
				width: 230rpx;
				height: 290rpx;
				background-color: #FFFFFF;
				border-radius: 10rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				color: #535353;

				image {
					width: 110rpx;
					height: 110rpx;
				}

				.txImg {
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
			}

			.uni-message {
				// border: 1px solid black;
				width: calc(100% - 270rpx);

				.uni-message-name {
					width: 100%;
					font-size: 28rpx;
					display: flex;

					.uni-message-name-icon {
						width: 60rpx;
						height: 50rpx;
						font-size: 36rpx;

						image {
							width: 60%;
							height: 80%;
						}
					}

					.uni-message-name-news {
						width: 200rpx;
						// height: 60rpx;
					}
				}

				.uni-message-name-text {
					// height: 60rpx;
					font-size: 28rpx;
				}

				.uni-message-hr {
					width: 240rpx;
					background-color: #FFFFFF;
				}
			}
		}

	}
</style>
